<template>
    <div class="h-100 w-100">
        <div style="height: 80px;width: 100%;">
            <tablleBar @submit-swich="swichTable" :list="['水生态','水环境','水资源']" ></tablleBar>

        </div>
     <div style="height: calc( 90% - 80px);" class="d-flex justify-content-evenly" >
        <div style="width: 33%;height: 100%;" v-for="(item,index) in activeData">
         <!-- {{ item.label }} -->
           <div style="width: 100%; height: 50%;">
               <div style="width: 150px;height: 120px;" class="imgcircle">
                {{item.value}}

               </div>
           </div>
           <div style="width: 100%; height: 50%;font-family: 'OPPOSans-Regular'; color: rgba(230, 253, 255, 0.80);font-size: 20px;" >
            <div style="">     {{item.label}}</div>
            <div style="color: #fff;">     {{item.value2}}</div>
            <div class="d-flex">    

                <div>  {{item.label2}}</div>
                <div style="color: rgb(118, 226, 118);">  {{item.average}}</div>

            </div>
       
           </div>
        </div>
     </div>
    </div>

</template>
    
<script setup lang='ts'>
  import * as echarts from "echarts";
  import tablleBar from '@/components/project/tablleBar.vue';

const activeItem=ref('0')
const data=ref([
        [
          {
            value:41.00,
             label:'年径流量总量控制率',
             value2:67.2,
             label2:'平均流量',
             average:'37.6%'
          },
          {
            value:37.00,
             label:'年平均地下潜水位',
             value2:'0.02m',
             label2:'平均潜位',
             average:'0.05m'
          } ,
          {
            value:'27.00°C',
             label:'热岛效应平均气温',
             value2:'27.00°C',
             label2:'平均温度',
             average:'32.50°Cm'
          } ,   
        ],
        [
          {
            value:53,
             label:'地下水检测点',
             value2:'',
             label2:'不低于Ⅲ类标准',
             average:'40'
          },
          {
            value:10,
             label:'城市源污染控制率',
             value2:'',
             label2:'控制率',
             average:'5%'
          } ,
       
        ],
        [
        {
            value:23,
             label:'污水再生利用率',
             value2:'',
             label2:'再生利用率',
             average:'25%'
          },
          {
            value:10,
             label:'雨水利用资源率',
             value2:'',
             label2:'利用资源率',
             average:'5%'
          } ,
        ]
       
    ])
const activeData=ref(data.value[0])
    const swichTable=(item:any)=>{
        console.log('item',item);
        activeItem.value=item
       activeData.value=data.value[item]
    }
 
    



onMounted(() => {

})
</script>
    
<style scoped lang="less" >
    .imgcircle{
  background: url( '../../../../assets/image/underGround/water_k.png');
  background-size: 100% 100%;
   margin: auto;
   text-align: center;
   font-size: 22px;
   line-height: 100px;
    }
</style>